<button *ngIf="options.closeButton" (click)="remove()" class="toast-close-button" aria-label="Close">
  <clr-icon shape="times"></clr-icon>
</button>

<clr-icon *ngIf="toastPackage.toastType === 'toast-info'" shape="info-circle" class="toast-icon is-solid"></clr-icon>
<clr-icon *ngIf="toastPackage.toastType === 'toast-error'" shape="exclamation-circle"
          class="toast-icon is-solid"></clr-icon>
<clr-icon *ngIf="toastPackage.toastType === 'toast-warning'" shape="exclamation-triangle"
          class="toast-icon is-solid"></clr-icon>
<clr-icon *ngIf="toastPackage.toastType === 'toast-success'" shape="check-circle"
          class="toast-icon is-solid"></clr-icon>

<div *ngIf="title" [class]="options.titleClass" [attr.aria-label]="title">
  {{title}}
  <ng-container *ngIf="duplicatesCount">[{{duplicatesCount + 1}}]</ng-container>
</div>
<div *ngIf="message && options.enableHtml" role="alertdialog" aria-live="polite"
     [class]="options.messageClass" [innerHTML]="message">
</div>
<div *ngIf="message && !options.enableHtml" role="alertdialog" aria-live="polite"
     [class]="options.messageClass" [attr.aria-label]="message">
  {{message}}
</div>
<div *ngIf="options.progressBar">
  <div class="toast-progress" [style.width]="width + '%'"></div>
</div>
